<template>
    <div class="container_box">
        <el-scrollbar class="main_box">
            <div class="friend_circle_sop">
                <div class="head">规则基本信息</div>
                <el-form :form="listData" label-width="140px">
                    <el-form-item label="规则名称" required>
                        <el-input
                            v-model="listData.title"
                            placeholder="请输入规则名称"
                            style="width: 800px"
                            show-word-limit
                            maxlength="20" />
                    </el-form-item>
                    <el-form-item label="SOP周期" required>
                        <el-radio v-model="listData.cycle_type" :label="1">每日</el-radio>
                        <el-radio v-model="listData.cycle_type" :label="2">每周（从周一至周日）</el-radio>
                        <el-radio v-model="listData.cycle_type" :label="3">每月</el-radio>
                    </el-form-item>
                    <el-form-item label="执行员工" required>
                        <el-select
                            v-model="listData.execute_workuser_list"
                            multiple
                            popper-class="zw-hide_select_option"
                            @click="opendept(domember, 1)"
                            @change="changedept">
                            <el-option v-for="item in domember" :key="item.id" :label="item.name" :value="item.id">
                                {{ item.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="推送要求" required>
                        <el-checkbox v-model="qwchoose" style="margin-bottom: 10px">企微客户朋友圈&nbsp;</el-checkbox>
                        <el-input-number
                            v-model="listData.corporate_times"
                            :min="0"
                            :max="3"
                            style="margin-left: -30px"
                            :disabled="!qwchoose"
                            @change="
                                val => {
                                    changeEvent(val, 1);
                                }
                            " />&nbsp;(客户每日最多只接收3条)<br /><el-checkbox v-model="personal">
                            个人微信朋友圈，每日员工需发布&nbsp; </el-checkbox
                        ><el-input-number
                            v-model="listData.personal_times"
                            :min="0"
                            :max="9"
                            :disabled="!personal"
                            style="width: 150px"
                            @change="
                                val => {
                                    changeEvent(val, 2);
                                }
                            " />&nbsp;篇个人微信朋友圈内容
                    </el-form-item>
                    <el-form-item label="任务质检人">
                        <el-switch v-model="is_enable" />&nbsp;<span>员工完成的情况是否需要质检</span>
                        <div v-show="!is_enable">
                            <span>无需质检时，固定时间点发送应用消息通知创建人和指定成员，所有执行员工完成的情况</span
                            ><br />
                            <el-checkbox v-model="createPerson" disabled>创建人</el-checkbox
                            ><el-checkbox v-model="member">指定成员&nbsp;</el-checkbox
                            ><el-select
                                v-model="listData.report_workuser_list"
                                :disabled="!member"
                                popper-class="zw-hide_select_option"
                                multiple
                                @click="opendept(pointmember, 2)"
                                @change="changedept">
                                <el-option
                                    v-for="item in pointmember"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    {{ item.name }}
                                </el-option>
                            </el-select>
                        </div>
                        <div v-show="is_enable">
                            <el-form-item label="员工质检" required>
                                <el-select
                                    v-model="listData.qa_workuser_list"
                                    multiple
                                    popper-class="zw-hide_select_option"
                                    @click="opendept(qamember, 3)"
                                    @change="changedept">
                                    <el-option
                                        v-for="item in qamember"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                        {{ item.name }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item v-show="is_enable" label="质检反馈">
                        <span>质检人完成后，会将质检情况反馈给指定成员</span><br />
                        <el-checkbox v-model="createPerson" disabled>创建人和执行员工</el-checkbox
                        ><el-checkbox v-model="member">指定成员&nbsp;</el-checkbox
                        ><el-select
                            v-model="listData.report_workuser_list"
                            :disabled="!member"
                            popper-class="zw-hide_select_option"
                            multiple
                            @click="opendept(pointmember, 2)"
                            @change="changedept">
                            <el-option v-for="item in pointmember" :key="item.id" :label="item.name" :value="item.id">
                                {{ item.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <!--员工选择-->
            <ZWDepart ref="DepartRef" :type="1" @submit="getDepart"></ZWDepart>
        </el-scrollbar>
        <div class="footer_box">
            <el-button @click="router.go(-1)">取消</el-button><el-button type="primary" @click="submit">提交</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, nextTick } from 'vue';
import router from '@/router';
import ZWDepart from '@/components/ZWDepart.vue';
import { ElMessage } from 'element-plus';
import { getSetionId } from '@/utils/utils';

import { createSop } from '@/api/smartMarketing/marketAutomation/friendCircleSop';

const DepartRef = ref(null);
const qwchoose = ref(false);
const personal = ref(false);
const is_enable = ref(false);
const createPerson = ref(true);
const member = ref(false);
const domember = ref([]);
const pointmember = ref([]);
const qamember = ref([]);
const whichopen = ref(null);
const listData = reactive({
    title: '', //规则名称
    cycle_type: 1, //1 日、2 周、3月
    execute_workuser_list: [], //执行人
    corporate_times: 0, //企微朋友圈数量
    personal_times: 0, //个位朋友圈数量
    qa_enable: 0, //是否启用 质检 0 否，1 是
    qa_workuser_list: [], //质检人
    report_workuser_list: []
});
//打开员工弹窗
const opendept = (data: any, num: any) => {
    // 执行员工和质检员工不能为同一个人
    if (num == 1) {
        DepartRef.value.disabledSelected = listData.qa_workuser_list;
    } else if (num == 3) {
        DepartRef.value.disabledSelected = listData.execute_workuser_list;
    }
    whichopen.value = num;
    DepartRef.value.selectedMember = data;
    DepartRef.value.departVisble = true;
};
const getDepart = (res: any) => {
    if (whichopen.value == 1) {
        domember.value = res;
        listData.execute_workuser_list = getSetionId('id', domember.value);
    } else if (whichopen.value == 2) {
        pointmember.value = res;
        listData.report_workuser_list = getSetionId('id', pointmember.value);
    } else {
        qamember.value = res;
        listData.qa_workuser_list = getSetionId('id', qamember.value);
    }
    DepartRef.value.departVisble = false;
};
//删除员工成员
const changedept = (res: any) => {
    if (whichopen.value == 1) {
        domember.value = domember.value.filter((data: any) => res.includes(data.id));
        listData.execute_workuser_list = res;
    } else if (whichopen.value == 2) {
        pointmember.value = pointmember.value.filter((data: any) => res.includes(data.id));
        listData.report_workuser_list = res;
    } else {
        qamember.value = qamember.value.filter((data: any) => res.includes(data.id));
        listData.qa_workuser_list = res;
    }
};
const submit = () => {
    if (!listData.title) {
        ElMessage.warning('请输入规则名称');
        return;
    }
    if (!listData.execute_workuser_list.length) {
        ElMessage.warning('请选择执行员工');
        return;
    }
    if (!listData.corporate_times && !listData.personal_times) {
        ElMessage.warning('请填写推送要求');
        return;
    }
    if (is_enable.value && !listData.qa_workuser_list.length) {
        ElMessage.warning('请选择质检人员');
        return;
    }
    listData.qa_enable = Number(is_enable.value);
    createSop(listData)
        .then((res: any) => {
            ElMessage.success('创建成功');
            router.go(-1);
        })
        .catch((err: any) => {
            ElMessage.error('创建失败');
        });
};
watch(
    () => member.value,
    val => {
        if (!val) {
            pointmember.value = [];
            listData.report_workuser_list = [];
        }
    }
);
watch(
    () => qwchoose.value,
    val => {
        if (!val) {
            listData.corporate_times = 0;
        }
    }
);
watch(
    () => personal.value,
    val => {
        if (!val) {
            listData.personal_times = 0;
        }
    }
);
const changeEvent = async (val: any, index: any) => {
    if (Math.floor(val) !== val) {
        ElMessage.warning('请输入整数');
        await nextTick();
        if (index == 1) {
            listData.corporate_times = Math.floor(listData.corporate_times);
        } else {
            listData.personal_times = Math.floor(listData.personal_times);
        }
    }
};
</script>
<style lang="scss" scoped>
.friend_circle_sop {
    padding: 24px;
}

.head {
    font-size: 16px;
    font-weight: 500;
    color: #33302d;
    line-height: 14px;
    margin-bottom: 20px;
}

.btn {
    display: flex;
    justify-content: center;
    padding-top: 11px;
    border-top: 1px solid #eaeaea;
}

:deep(.el-input) {
    --el-disabled-bg-color: #f5f5f5;
}

:deep(.el-input-number) {
    .el-input-number__increase,
    .el-input-number__decrease {
        background-color: #fff;
    }

    &.is-disabled {
        .el-input-number__increase,
        .el-input-number__decrease {
            background-color: #f5f5f5;
        }
    }
}
</style>
